<template>
  <div>
    <!-- 信息显示与录入 -->
    <Card>
      <div style="color: rgba(24, 144, 255, 1); font-size: 16px" v-if="assignTitle">
        <Row>
          <i-col span="18">
            <span>计划编号：{{ selection[0].planid }}</span>
            <span style="margin: 10px">保单：{{ tabValue[0] }}</span>
            <span>备注：{{ planremark === "undefined" ? "" : planremark }}</span>
          </i-col>
        </Row>
        <Divider></Divider>
      </div>
      <span v-if="selection.contno != ''">
        <Tabs type="card" :animated="false" :closable="close" @on-tab-remove="tabRemove" @on-click="clickTab"
          v-if="tabShow">
          <div v-for="item in count" :key="item">
            <TabPane :label="tabLabel[item - 1]" :name="item - 1" v-if="tabStatus[item - 1]"></TabPane>
          </div>
          <!-- 失效件、问题件不展示相关保单按钮，其他展示 -->
          <Button @click="handleTabs" type="primary" slot="extra" v-if="
            this.insuranceType != 'disabled' &&
            this.insuranceType != 'problem'
          ">
            相关保单
            <Badge :count="contCount" style="margin-left: 5px"></Badge>
          </Button>
        </Tabs>
        <!-- 保单对话框 -->
        <Modal footer-hide="true" :value="aboutPolicy" :mask-closable="false" @on-visible-change="modalVisibleChange1"
          width="1037">
          <span slot="header" style="color: #fff; font-size: 16px">{{ modalTitle }}</span>
          <Tabs>
            <TabPane label="投保人维度">
              <Table :columns="superviseColumns" :data="superviseData" @on-selection-change="selectionChange">
                <template slot-scope="{ row }" slot="planstatename">
                  <span v-if="row.planstatename == '未服务'">
                    <Button type="warning" size="small" class="relatedButton">{{
                      row.planstatename
                    }}</Button>
                  </span>
                  <span v-if="row.planstatename == '服务中'">
                    <Button type="primary" size="small" class="relatedButton">{{
                      row.planstatename
                    }}</Button>
                  </span>
                  <span v-if="row.planstatename == '已完成'">
                    <Button type="success" size="small" class="relatedButton">{{
                      row.planstatename
                    }}</Button>
                  </span>
                </template>
              </Table>
              <div style="text-align: center; margin-top: 20px">
                <Button type="primary" @click="sureDoWork" v-show="!aboutPolicyBtnflag">确认</Button>
              </div>
            </TabPane>
            <Button type="primary" slot="extra" @click="relatedDeal" v-show="aboutPolicyBtnflag">
              <Icon type="md-flash" />批量处理
            </Button>
          </Tabs>
        </Modal>
        <!-- 保单信息 -->
        <div class="baseInfo" v-if="assignContNoNotnull">
          <span>
            <Row>
              <i-col span="2">
                <div class="title">业务员信息</div>
              </i-col>
              <i-col span="4">
                <span v-if="agent.agentstate">
                  <Button :type="
                    agent.agentstate
                      ? agent.agentstate == '01' || agent.agentstate == '02'
                        ? 'success'
                        : 'error'
                      : 'default'
                  " size="small" style="border-radius: 12px;padding-left: 20px;
                      padding-right: 20px;
                      font-size: 12px;
                      height: 20px;
                    ">{{
                      agent.agentstate
                        ? agent.agentstate == "01" || agent.agentstate == "02"
                          ? "在职"
                          : "离职"
                        : ""
                    }}</Button>
                </span>
              </i-col>
            </Row>
            <Row>
              <i-col span="6">
                <span class="conLabel">业务员：</span>
                <span class="conInfo">{{ agent.agentName }}</span>
              </i-col>
              <i-col span="10">
                <span class="conLabel">所属机构：</span>
                <span class="conInfo">{{ agent.managecom }}</span>
              </i-col>
              <i-col span="6">
                <span class="conLabel">联系电话：</span>
                <span class="conInfo">{{ agent.mobile }}</span>
              </i-col>
            </Row>
          </span>
          <div class="title">保单信息
            <Tooltip placement="right" theme="light" v-if="customer && (customer.appntvalid || customer.insuerdvalid || customer.beneficiary)">
              <Icon type="ios-alert-outline" color="#ff9900" size="18" />
              <div slot="content">
                <span v-if="customer.appntvalid">投保人{{customer.insuerdvalid || customer.beneficiary?'、':''}}</span>
                <span v-if="customer.insuerdvalid">被保人{{customer.beneficiary?'、':''}}</span>
                <span v-if="customer.beneficiary">受益人</span>证件有效期已过期！
              </div>
            </Tooltip>
          </div>
          <Row>
            <i-col span="6">
              <span class="conLabel">保单标志：</span>
              <span class="conInfo">{{ cont.contflagname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel" v-if="
                this.insuranceType == 'supervise' ||
                this.insuranceType == 'charge'
              ">应交次数：</span>
              <span class="conLabel" v-else>已交次数：</span>
              <span class="conInfo">{{ cont.payCount }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交日：</span>
              <span class="conInfo">{{ cont.paytodate }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交保费：</span>
              <span class="conInfo">
                {{ cont.paymoney }}
                <Tooltip placement="right" v-show="
                  cont.lastmainmoney + cont.lastsubmoney != cont.paymoney
                ">
                  <Icon type="ios-help-circle-outline" style="color: #000" />
                  <div slot="content">
                    <div class="tooltipContent">
                      上期主险保费：{{ cont.lastmainmoney }}元
                    </div>
                    <div class="tooltipContent">
                      上期附加险保费：{{ cont.lastsubmoney }}元
                    </div>
                  </div>
                </Tooltip>
              </span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">主险：</span>
              <span class="conInfo">{{ cont.mainriskname }}</span>
              <Icon v-if="cont.mainriskList && cont.mainriskList.length > 0" type="ios-information-circle-outline"
                @click="riskinfoModalShow(cont.mainriskList)" />
            </i-col>
            <i-col span="6">
              <span class="conLabel">主险保费：</span>
              <span class="conInfo">{{ cont.mainpolpaymoney }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险：</span>
              <span class="conInfo">
                <span class="conInfo subRisk" v-if="cont.subpol">
                  <div v-for="(item, index) in cont.subpol" :key="index">
                    {{ item.riskname ? item.riskname : '' }}{{
                      item.subprem === '' || item.subprem === null
                        ? '' : item.subprem + '元'
                    }}
                    <br />
                  </div>
                </span>
                <span class="conInfo subRisk" v-else></span>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险保费：</span>
              <span class="conInfo">{{ cont.totalsubpolmoney }}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">扣款失败原因：</span>
              <span class="conInfo">{{ cont.banksuccflagname }}</span>
            </i-col>
          </Row>
          <div class="title">投/被保人信息</div>
          <Row>
            <i-col span="6">
              <span class="conLabel">投保人：</span>
              <span class="conInfo">
                {{ customer.appntname }}
                <Tooltip placement="right">
                  <Icon type="ios-help-circle-outline" style="color: #000" />
                  <div slot="content">
                    <span v-for="(item, index) in customer.customerprotrayal" :key="index">
                      <div class="tooltipContent">{{ item }}</div>
                    </span>
                  </div>
                </Tooltip>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人性别：</span>
              <span class="conInfo">{{ customer.appntsexname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人出生日期：</span>
              <span class="conInfo">{{ customer.appntbirthday | filterdate }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人电话：</span>
              <span class="conInfo">{{ customer.appntphone }}</span>
            </i-col>

          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">被保人：</span>
              <span class="conInfo">{{ customer.insuredname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人性别：</span>
              <span class="conInfo">{{ customer.insuredsexname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">关系：</span>
              <span class="conInfo">{{ customer.relation }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人出生日期：</span>
              <span class="conInfo">{{ customer.insuredbirthday | filterdate }}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">被保人电话：</span>
              <span class="conInfo">{{ customer.insuredphone }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系地址：</span>
              <span class="conInfo">{{ customer.appntpostaladdress }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行：</span>
              <span class="conInfo">{{ customer.bankname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行卡号：</span>
              <!-- 银行卡号倒数第5-8位显示为“*”号 -->
              <span class="conInfo">{{ customer.bankaccno }}</span>
            </i-col>
          </Row>
          <hr style="margin-bottom: 10px" />
        </div>
      </span>
      <!-- 工作录入 -->
      <div class="workrecord">
        <div class="header" v-if="this.insuranceType != 'problem'">
          <span class="title">本次工作记录</span>
          <Button type="default" @click="historyWork">
            历史工作记录
            <Badge :count="historyCount" style="margin-left: 5px"></Badge>
          </Button>
        </div>
        <!-- 历史工作记录对话框 -->
        <Modal footer-hide="true" :value="historyWorkRecord" :mask-closable="false"
          @on-visible-change="modalVisibleChange2" width="1037">
          <span slot="header" style="color: #fff; font-size: 16px">历史工作记录</span>
          <Timeline v-for="(serviceRecord1, index) in serviceRecord2" :key="index">
            <TimelineItem v-for="(item, index) in serviceRecord1" :key="index">
              <div class="modalTitle">
                <Row gutter="10">
                  <i-col span="6">
                    <span>工作日期：</span>
                    <span>{{ item.updateTime }}</span>
                  </i-col>
                  <i-col span="5">
                    <span class="conLabel" v-if="
                      (insuranceType == 'supervise' ||
                        insuranceType == 'charge') &&
                      !item.infoType
                    ">应交次数：</span>
                    <span class="conLabel" v-else-if="item.infoType">交费期次：</span>
                    <span class="conLabel" v-else>已交次数：</span>
                    <span class="gray">{{
                      item.payyear + "/" + item.payyears
                    }}{{ item.payintv }}</span>
                  </i-col>
                  <i-col span="5">
                    <span>工作方式：</span>
                    <span class="gray">{{
                      item.worktype ? item.worktype : ""
                    }}</span>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent" v-if="!item.infoType">
                <Row gutter="5">
                  <i-col span="5">
                    <span>处理人：</span>
                    <span>{{ item.workname ? item.workname : "" }}</span>
                    <Button type="default" size="small" class="waiqin">
                      <span style="font-size: 12px">{{ item.role }}</span>
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <span>收费状态预估：</span>
                    <span class="gray">{{
                      item.estimatestate === "0"
                        ? "可回收"
                        : item.estimatestate === "1"
                          ? "收费困难"
                          : item.estimatestate === "2"
                            ? "不可回收"
                            : item.estimatestate === "3"
                              ? "不确定"
                              : ""
                    }}</span>
                  </i-col>
                  <i-col span="4">
                    <span>预估交费难度：</span>
                    <span class="gray">{{ item.difficulty }}级</span>
                  </i-col>
                  <i-col span="4">
                    <span>交费时间预估：</span>
                    <span class="gray" v-if="item.estimatedate">{{
                      item.estimatedate.substr(0, 10)
                    }}</span>
                  </i-col>
                  <i-col span="4">
                    <span>是否联系成功：</span>
                    <span class="gray">{{
                      item.linksuccessflag === "0" ? "是" : "否"
                    }}</span>
                  </i-col>
                  <i-col span="4">
                    <span>主管陪访：</span>
                    <span class="gray">{{
                      item.orderwith ? item.orderwith : "否"
                    }}</span>
                  </i-col>
                </Row>
                <div class="reasonDetail">
                  <span>未收原因说明</span>
                  <span v-for="(t2, index) in item.reasonByCompany" :key="index">
                    <Button size="small" class="reasonBtn">{{ t2 }}</Button>
                  </span>
                  <span v-for="(t3, index) in item.reasonByCustomer" :key="index">
                    <Button size="small" class="reasonBtn">{{ t3 }}</Button>
                  </span>
                  <span v-if="item.reasonByother">
                    <Button size="small" class="reasonBtn">{{
                      item.reasonByother
                    }}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <span>工作结果记录</span>
                  <span v-for="(t2, index) in item.workresultid" :key="index">
                    <Button size="small" class="reasonBtn">{{ t2 }}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <!-- <span class="gray" v-if="item.linksuccessflag==='0'">已经通知客户应交日期，请提前存钱</span> -->
                  <span class="gray">{{ item.workresult }}</span>
                </div>
                <div class="reasonDetail">
                  <span>实时扣款：{{ item.paystate }}</span>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.recordingaddress" type="success" size="small" class="waiqin"
                    @click="phoneRecordShow(item)">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneRecord" :mask-closable="false" :closable="false" width="600"
                    :styles="{ top: '200px' }">
                    <span slot="header" style="color: #fff; font-size: 14px">电话录音下载</span>
                    <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause" />
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{ row }" slot="opration">
                        {{ row.opration }}
                        <Button type="success" size="small" style="
                            border-radius: 12px;
                            padding-left: 20px;
                            padding-right: 20px;
                          " @click="downloadPhoneRecord(row.id)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3"
                      style="float: right; margin-top: 20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                  <Button v-if="item.notedetail" type="success" size="small" class="waiqin"
                    @click="messageContentShow(item)">短信内容</Button>
                  <Modal transfer footer-hide="true" :value="messageContent" :mask-closable="false" :closable="false"
                    width="703" :styles="{ top: '200px' }">
                    <span slot="header" style="color: #fff; font-size: 14px">短信内容</span>
                    <Table :columns="messageContentColumns" :data="messageContentData" border></Table>
                    <Button type="primary" @click="modalVisibleChange4"
                      style="float: right; margin-top: 20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
                <div class="reasonDetail">
                  <span>
                    <Button v-if="item.facecontent" type="success" size="small" class="waiqin"
                      @click="interviewShow(item)">
                      {{
                        item.evaluateflag === "Y"
                          ? "面访联系-评鉴表图片"
                          : "面访联系图片"
                      }}
                    </Button>
                  </span>
                  <span>
                    <Button v-if="item.netcontent" type="success" size="small" class="waiqin"
                      @click="internetShow(item)">网络联系图片</Button>
                  </span>
                </div>
                <!-- 面访联系图片对话框  -->
                <Modal footer-hide="true" :value="interviewModal" :mask-closable="false" :closable="false" width="600"
                  :styles="{ top: '200px' }">
                  <span slot="header" style="color: #fff; font-size: 14px">面访联系图片</span>
                  <Table :columns="interviewColumns" :data="interviewData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon == 'image'" style="font-size: 20px" />
                        <Icon type="ios-paper" v-if="row.icon == 'paper'" style="font-size: 20px" />
                      </div>
                    </template>
                    <template slot-scope="{ row }" slot="opration">
                      {{ row.opration }}
                      <Button type="success" size="small" style=" border-radius: 12px;padding-left: 20px;
                          padding-right: 20px;
                        " @click="downloadInterview(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="modalVisibleChange6" style="float: right; margin-top: 20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 网络联系图片 -->
                <Modal footer-hide="true" :value="internetModal" :mask-closable="false" :closable="false" width="600"
                  :styles="{ top: '200px' }">
                  <span slot="header" style="color: #fff; font-size: 14px">网络联系图片</span>
                  <Table :columns="internetColumns" :data="internetData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon == 'image'" style="font-size: 20px" />
                        <Icon type="ios-paper" v-if="row.icon == 'paper'" style="font-size: 20px" />
                      </div>
                    </template>
                    <template slot-scope="{ row }" slot="opration">
                      {{ row.opration }}
                      <Button type="success" size="small" style="
                          border-radius: 12px;
                          padding-left: 20px;
                          padding-right: 20px;
                        " @click="downloadInternet(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="modalVisibleChange7" style="float: right; margin-top: 20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 通知业务员 -->
                <div class="reasonDetail" v-if="
                  item.uerMessageToAgentVOS &&
                  item.uerMessageToAgentVOS.length > 0
                ">
                  <span>通知业务员：</span>
                </div>
                <div class="reasonDetail" v-if="
                  item.uerMessageToAgentVOS &&
                  item.uerMessageToAgentVOS.length > 0
                " style="margin-left: 10px">
                  <div v-for="temp in item.uerMessageToAgentVOS" :key="temp">
                    <Row style="margin-bottom: 10px">
                      <i-col style="color: rgba(128, 128, 128, 1)">{{ temp.senddate }} {{ temp.sendcontent }}</i-col>
                    </Row>
                  </div>
                </div>
                <!-- 点评 -->
                <div class="reasonDetail" v-if="item.professionalCommentVOS">
                  <div v-for="(ti, index) in item.professionalCommentVOS" :key="index">
                    <span>{{ ti.commentname }}点评：</span>
                    <Rate v-model="ti.level" disabled />
                    <span class="gray">{{ ti.comment }}</span>
                    <span style="margin-left:10px">{{ ti.createTime }}</span>
                  </div>
                </div>
                <div class="reasonDetail" v-if="
                  item.professionalCommentVOS &&
                  (item.professionalCommentVOS.length === 0 || null)
                ">
                  <span>上级点评：</span>
                  <Rate v-model="superiorReview" disabled />
                  <span>未评价</span>
                </div>
              </div>
              <div class="modalContent" v-else>
                <div class="reasonDetail">
                  <i-col span="5">
                    <span>处理人：</span>
                    <span>{{
                      item.customerserviceno ? item.customerserviceno : ""
                    }}</span>
                    <Button type="primary" ghost size="small" class="waiqin">
                      <span style="font-size: 12px">客服</span>
                    </Button>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>回访结果：</span>
                    <span>{{ item.visitresult ? item.visitresult : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col>
                    <span>原因：</span>
                    <span>{{ item.reason ? item.reason : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>备注：</span>
                    <span>{{ item.remark ? item.remark : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.url" type="success" size="small" class="waiqin"
                    @click="phoneCCRecord = true">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneCCRecord" :mask-closable="false" :closable="false" width="400"
                    :styles="{ top: '200px' }">
                    <span slot="header" style="color: #fff; font-size: 14px">电话录音下载</span>
                    <Table :columns="phoneCCRecordColumns" :data="item.url" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause" />
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{ row }" slot="opration">
                        {{ row.opration }}
                        <Button type="success" size="small" style="
                            border-radius: 12px;
                            padding-left: 20px;
                            padding-right: 20px;
                          " @click="downloadCCPhoneRecord(row.url)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3"
                      style="float: right; margin-top: 20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
              </div>
            </TimelineItem>
            <div v-if="
              serviceRecord1 &&
              serviceRecord1.length !== 0 &&
              index === serviceRecord2.length - 1
            ">
              <TimelineItem v-for="(item, index) in serviceRecord1[0].payFinishVOS" :key="index"
                :color="item.finishstate === '交费完成' ? 'green' : 'red'">
                <span class="time mr20">{{
                  item.finishstate
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  item.lastpaytodate
}}</span>
                <span class="conLabel" v-if="
                  insuranceType == 'supervise' || insuranceType == 'charge'
                ">应交次数：</span>
                <span class="conLabel" v-else>已交次数：</span>
                <span class="content">{{
                  item.paycount + "/" + item.payyears + "" + item.payintvname
                }}</span>
              </TimelineItem>
            </div>
          </Timeline>
        </Modal>
        <div v-if="this.insuranceType != 'problem'">
          <Row gutter="10">
            <i-col span="3">
              <span class="conLabel">工作日期</span>
            </i-col>
            <i-col span="4">
              <span class="conLabel">工作方式</span>
            </i-col>
            <i-col span="4">
              <span class="conLabel">收费预估状态</span>
            </i-col>
            <i-col span="4">
              <span class="conLabel">预估交费难度</span>
            </i-col>
            <i-col span="3">
              <span class="conLabel">交费时间预估</span>
            </i-col>
            <i-col span="3">
              <span class="conLabel">是否联系成功</span>
            </i-col>
            <i-col span="3">
              <span class="conLabel">主管陪访</span>
            </i-col>
          </Row>
          <Row gutter="10">
            <i-col span="3">
              <span class="conInfo">{{ form1.workdate }}</span>
            </i-col>
            <i-col span="4">
              <!-- <span class="conInfo">{{ form1.worktypeCode }}</span> -->
              <Select v-model="form1.worktypeCode">
                <Option v-for="item in nextWorkType" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </i-col>
            <i-col span="4">
              <Select v-model="form1.chargeStatus">
                <Option v-for="item in estimatestate" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </i-col>
            <i-col span="4">
              <Select :disabled="chargeDifficultDisabled" v-model="form1.chargeDifficult">
                <Option v-for="item in 11" :key="item - 1" :value="item - 1">{{
                  item - 1
                }}</Option>
              </Select>
            </i-col>
            <i-col span="3">
              <DatePicker v-model="form1.chargeDate" :editable="false" :options="options3"></DatePicker>
            </i-col>
            <i-col span="3">
              <Select v-model="form1.successContent">
                <Option v-for="item in linksuccessflag" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </i-col>
            <i-col span="3">
              <Select v-model="form1.visitTogether">
                <Option v-for="item in order" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </i-col>
          </Row>
          <div>
            <span class="conLabel">未收原因说明</span>
          </div>
          <div>
            <!-- 公司原因 -->
            <CheckboxGroup v-model="form1.companyReason" style="margin-bottom: 5px" @on-change="checkSelect">
              <span class="circle"></span>
              <span style="font-size: 12px">公司原因：</span>
              <Checkbox label="1">
                <span>业务员投保</span>
              </Checkbox>
              <Checkbox label="2">
                <span>产品不理想</span>
              </Checkbox>
              <Checkbox label="3">
                <span>不满意业务员</span>
              </Checkbox>
              <Checkbox label="4">
                <span>服务不满意</span>
              </Checkbox>
              <Checkbox label="5">
                <span>对公司不信任</span>
              </Checkbox>
              <Checkbox label="6">
                <span>同业竞争</span>
              </Checkbox>
              <Checkbox label="7">
                <span>对公贷款单</span>
              </Checkbox>
              <Checkbox label="8">
                <span>考核件</span>
              </Checkbox>
            </CheckboxGroup>
            <!-- 用户原因 -->
            <CheckboxGroup v-model="form1.uerReason" style="margin-bottom: 5px">
              <span class="circle"></span>
              <span style="font-size: 12px">用户原因：</span>
              <Checkbox label="1">
                <span>暂时经济困难</span>
              </Checkbox>
              <Checkbox label="2">
                <span>家庭原因</span>
              </Checkbox>
              <Checkbox label="3">
                <span>单位投保</span>
              </Checkbox>
              <Checkbox label="4">
                <span>地址不详无法联系</span>
              </Checkbox>
              <Checkbox label="5">
                <span>社保冲击</span>
              </Checkbox>
              <Checkbox label="6">
                <span>人情单</span>
              </Checkbox>
              <Checkbox label="7">
                <span>产品混淆</span>
              </Checkbox>
            </CheckboxGroup>
            <Row>
              <span class="circle"></span>
              <span style="font-size: 12px">其他原因：</span>
              <Checkbox @on-change="otherReasonChange"></Checkbox>
              <Input v-model="form1.otherReason" style="width: 20%" size="small" placeholder="请输入" v-if="inputSelect" />
            </Row>
          </div>
          <!-- 工作结果 -->
          <div>
            <span class="conLabel">工作结果记录</span>
          </div>
          <div class="workResult">
            <div>
              <textarea placeholder="请输入" v-model="form1.workResultRecord" class="textareaFont"></textarea>
            </div>
            <div>
              <Button :type="but[0]" size="small" class="col-30" @click="nineClick(0)">客户已知晓，近期交费</Button>
              <Button :type="but[1]" size="small" class="col-30" @click="nineClick(1)">客户已知晓，宽末交费</Button>
              <Button :type="but[2]" size="small" class="col-30" @click="nineClick(2)">客户明确不交费</Button>
              <Button :type="but[3]" size="small" class="col-30" @click="nineClick(3)">已通知客户余额不足及停效时间</Button>
              <Button :type="but[4]" size="small" class="col-30" @click="nineClick(4)">已通知业务员</Button>
              <Button :type="but[5]" size="small" class="col-30" @click="nineClick(5)">客户挂断电话</Button>
              <Button :type="but[6]" size="small" class="col-30" @click="nineClick(6)">已告知客户交费时间及金额</Button>
              <Button :type="but[7]" size="small" class="col-30" @click="nineClick(7)">联系方式不正确</Button>
              <Button :type="but[8]" size="small" class="col-30" @click="nineClick(8)">未拨通</Button>
            </div>
          </div>
          <div class="rePlay">
            <!-- 是否可以自主完成 -->
            <span v-if="ownComplete">
              <RadioGroup v-model="form1.chargeRadio" @on-change="chargeRadioChange">
                <Radio label="submit">完成工作</Radio>
                <Radio label="replan">下次工作再计划：</Radio>
              </RadioGroup>
              <span class="conLabel"></span>
              <DatePicker :editable="false" v-model="form1.workReplan" :disabled="reDatedisabled"></DatePicker>
              <span class="conLabel" style="margin-left: 20px">工作方式：</span>
              <Select v-model="form1.workRetype" style="width: 20%" :disabled="reDatedisabled" clearable>
                <Option v-for="item in nextWorkType" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </span>
            <span v-else>
              <span class="conLabel">下次工作再计划：</span>
              <DatePicker :editable="false" v-model="form1.workReplan"></DatePicker>
              <span class="conLabel" style="margin-left: 20px">工作方式：</span>
              <Select v-model="form1.workRetype" style="width: 20%">
                <Option v-for="item in nextWorkType" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </span>
          </div>
          <div>
            <Button type="primary" style="padding-left: 30px; padding-right: 30px" @click="workSubmit"
              :loading="workSubmitLoading">提交</Button>
            <Button type="primary" :disabled="couMoneyDisabled" style="margin-left: 20px" @click="realTimeDeductions"
              :loading="realTimeDeductionsLoading">实时扣款</Button>
            <Button type="primary" :disabled="noticeDisabled" style="margin-left: 20px" @click="selectSendMsg"
              v-if="this.insuranceType == 'supervise'">通知业务员</Button>
          </div>
        </div>
        <div v-show="this.insuranceType == 'problem'">
          <div class="header">
            <span class="title">沟通记录</span>
          </div>
          <div class="problemContent">
            <div v-for="(item, index) in recordVOS" :key="item.index" class="problem">
              <div style="color: #000">{{ index + 1 + "、" }}</div>
              <div class="content">
                <div class="pro">
                  <div>
                    <span style="font-weight: bold; color: #000">问题：</span><span>{{ item.problem }}</span>
                  </div>
                  <span class="time">{{ item.sendTime }}</span>
                </div>
                <div class="pro" v-show="item.replay">
                  <div>
                    <span style="font-weight: bold; color: #000">回复：</span><span>{{ item.replay }}</span>
                  </div>
                  <span class="time">{{ item.replayTime }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="review">
            <div class="header">
              <span class="title">回复</span>
            </div>
            <Input v-model="problemReview" type="textarea" :rows="4" :disabled="
              recordVOS[recordVOS.length - 1].replay != '' &&
              recordVOS[recordVOS.length - 1].replay != null
            " placeholder="请输入" />
          </div>
          <div style="text-align: center">
            <Button type="primary" @click="problemSubmit">提交</Button>
          </div>
        </div>
      </div>
    </Card>

    <!-- 通知业务员弹框 -->
    <Modal v-model="noticeModal" :mask-closable="false" footer-hide="true" title="通知业务员" width="600px">
      <div class="noticeBody">
        <div v-for="item in msgList" :key="item">
          <Row style="margin-bottom: 10px">
            <i-col>发送日期: {{ item.senddate }}</i-col>
          </Row>
          <Row style="margin-bottom: 10px">
            <i-col style="color: rgba(128, 128, 128, 1)">{{
              item.sendcontent
            }}</i-col>
          </Row>
        </div>
        <Row style="margin-bottom: 10px">
          <i-col>
            <Input type="textarea" :rows="4" v-model="noticeMsg" placeholder="请输入" @on-change="msgChange" />
          </i-col>
        </Row>
        <Row>
          <i-col>
            <Button type="primary" :disabled="sendFlag" @click="sendNotice">发送</Button>
          </i-col>
        </Row>
      </div>
    </Modal>

    <!-- 操作台 -->
    <Card style="margin-top: 20px" v-if="this.insuranceType != 'problem'">
      <div class="workStation">
        <div class="title">操作台</div>
        <span class="leftMenu">
          <ul>
            <span v-if="assignContNoNotnull">
              <li @click="show(1)" :class="consoleIndex == 1 ? 'active' : ''">
                电话联系
              </li>
              <li @click="show(2)" :class="consoleIndex == 2 ? 'active' : ''">
                短信联系
              </li>
            </span>
            <li @click="show(3)" :class="consoleIndex == 3 ? 'active' : ''">
              网络联系
            </li>
            <li @click="show(4)" :class="consoleIndex == 4 ? 'active' : ''">
              面访联系
            </li>
          </ul>
        </span>
        <div class="phoneContact" v-show="isPhoneContact">
          <div class="first">
            <div class="position">业务员</div>
            <div class="person">
              <div>{{ agent.name }}</div>
              <div class="number">{{ agent.mobile }}</div>
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal0">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button type="primary" @click="callSomeone('0')" style="margin-right: 20px">
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv ref="callUpload" :show-upload-list="false" :before-upload="callbeforeUpload" v-on:click.stop>
                <Button type="primary" :loading="callUploadLoading">
                  <Icon type="ios-cloud-upload" size="22" style="color: #fff"></Icon>上传
                </Button>
                <Modal v-model="showModal" title="电话录音上传" @on-ok="uploadOk('callUpload')" @on-cancel="onCancel"
                  :closable="false" :mask-closable="false">
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
          <div class="first">
            <div class="position" style="background-color: rgba(0, 186, 173, 1)">
              投保人
            </div>
            <div class="person">
              <div>{{ customer.appntname }}</div>
              <div class="number">{{ customer.appntphone }}</div>
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal1">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button type="primary" @click="callSomeone('1')" style="margin-right: 20px">
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv ref="callUpload2" :show-upload-list="false" :before-upload="callbeforeUpload2">
                <Button type="primary" :loading="callUploadLoading">
                  <Icon type="ios-cloud-upload" size="22" style="color: #fff"></Icon>上传
                </Button>
                <Modal v-model="showModal2" title="电话录音上传" @on-ok="uploadOk('callUpload2')" @on-cancel="onCancel"
                  :closable="false" :mask-closable="false">
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
          <div class="first">
            <div class="position" style="background-color: rgba(246, 166, 35, 1)">
              其他
            </div>
            <div class="person">
              <Input v-model="phoneNumber" placeholder="请输入号码" />
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal2">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button type="primary" @click="callSomeone('2')" style="margin-right: 20px">
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv ref="callUpload3" :show-upload-list="false" :before-upload="callbeforeUpload3">
                <Button type="primary" :loading="callUploadLoading">
                  <Icon type="ios-cloud-upload" size="22" style="color: #fff"></Icon>上传
                </Button>
                <Modal v-model="showModal3" title="电话录音上传" @on-ok="uploadOk('callUpload3')" @on-cancel="onCancel"
                  :closable="false" :mask-closable="false">
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
        </div>
        <Modal footer-hide="true" :value="callModalShow" :mask="false" :closable="false"
          @on-visible-change="modalVisibleChange5" :draggable="true" :scrollable="true" width="320" title=" ">
          <!-- <iframe
            v-if="iframeNeedReloaded"
            src="../../../../static/tel/testconnect.htm"
            id="frame"
            name="frame"
            ref="telIframe"
            style="display:none"
          ></iframe> -->
          <div class="callContent">
            <div class="callHeader1">
              <div class="callHeader2">
                <Icon type="md-person" />
              </div>
            </div>
            <div class="callPerson">
              {{
  callIndex === "0"
  ? agent.name
  : callIndex === "1"
    ? customer.appntname
    : ""
              }}
            </div>
            <div class="callNum">
              {{
  callIndex === "0"
  ? agent.mobile
  : callIndex === "1"
    ? customer.appntphone
    : phoneNumber
              }}
            </div>
            <div class="callTime">
              <Icon type="md-call" />
              <span id="time">{{ recordTime }}</span>
            </div>
            <div class="callHangup" @click="closeCallModel" style="cursor: pointer">
              <Icon type="md-call" />
            </div>
          </div>
        </Modal>
        <div class="messageContact" v-show="isMessageContact">
          <div class="message">
            <div style="background-color: #fff9f0; margin-bottom: 5px; width: 92%">
              <Icon type="md-alert" style="color: orange; font-size: 18px" />
              {{ remainMessageCount }}
            </div>
            <Row>
              <span>短信通知：</span>
              <Select v-model="message.messageToPerson" style="width: 20%" @on-change="messagePersonChange" clearable>
                <Option v-for="item in personList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
              <span style="margin-left: 20px">短信模板：</span>
              <Select v-model="message.messageModel" style="width: 20%" @on-change="messageModelChange" clearable>
                <Option v-for="item in modelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </Row>
            <div class="messageTitle">短信预览内容</div>
            <div class="messageContent">{{ messagePreveiwContent }}</div>
            <Button type="primary" style="margin-top: 5px" @click="judgeMessageCount" :loading="sendMessageLoading">
              <Icon type="ios-paper-plane" style="margin-right: 5px" />发送
            </Button>
          </div>
        </div>
        <div class="internetContact" v-show="isInternetContact">
          <div class="internet">
            <div>网络联系证明</div>
            <Row>
              <i-col span="12">
                <Uploadv multiple ref="upload" type="drag" :before-upload="handleUpload" :show-upload-list="false"
                  :on-success="uploadSuccess" :on-error="uploadFail" :headers="{
                    Authorization: '',
                  }" name="multipartFile" :data="{
  planid: '',
  workid: '',
  delid: '',
  controllerType: '',
}" :action="action1" class="uploadStyle">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>点击或将文件拖拽到这里上传</p>
                  <p style="color: rgba(0, 0, 0, 0.43)">
                    支持扩展名：.rar .zip .doc .docx .pdf .jpg...
                  </p>
                </Uploadv>
              </i-col>
              <i-col span="12" class="fileHeight">
                <div v-for="(item, index) in file" :key="index">
                  <div style="margin-top: 10px; margin-left: 20px">
                    <Icon type="md-attach" style="transform: rotate(90deg)" />
                    &nbsp;{{ item.name }}
                    <a href="javascript:;" @click="delectFile(item.keyID)">X</a>
                  </div>
                </div>
              </i-col>
            </Row>
            <Button type="primary" @click="upload" :loading="uploadLoading">确定</Button>
          </div>
        </div>
        <div class="internetContact" v-show="isFaceContact">
          <div class="internet">
            <div>面访联系证明</div>
            <Row>
              <i-col span="12">
                <Uploadv multiple ref="upload2" type="drag" :before-upload="handleUpload2" :show-upload-list="false"
                  :on-success="uploadSuccess2" :on-error="uploadFail2" :headers="{
                    Authorization: '',
                  }" name="multipartFile" :data="{
  planid: '',
  workid: '',
  delid: '',
  controllerType: '',
  evaluateflag: disabledGroup,
}" :action="action2" class="uploadStyle">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>点击或将文件拖拽到这里上传</p>
                  <p style="color: rgba(0, 0, 0, 0.43)">
                    支持扩展名：.rar .zip .doc .docx .pdf .jpg...
                  </p>
                </Uploadv>
              </i-col>
              <i-col span="12" class="fileHeight">
                <div v-for="(item, index) in file2" :key="index">
                  <div style="margin-top: 10px; margin-left: 20px">
                    <Icon type="md-attach" style="transform: rotate(90deg)" />
                    &nbsp;{{ item.name }}
                    <a href="javascript:;" @click="delectFile2(item.keyID)">X</a>
                  </div>
                </div>
              </i-col>
            </Row>
            <div class="btnEvaluation">
              <div>
                <Button type="primary" @click="upload2" :loading="uploadLoading2">确定</Button>
              </div>
              <div class="Group">
                <CheckboxGroup v-model="disabledGroup" @on-change="Onchange">
                  <Checkbox label="Y">上传材料是否包含评鉴表</Checkbox>
                </CheckboxGroup>
              </div>
            </div>
          </div>
        </div>
        <div class="clearBoth"></div>
      </div>
    </Card>
    <div class="contain" ref="mybox" style="width: 0; hieght: 0; overflow: hidden">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas"></canvas>
    </div>
    <!-- 显示图片 -->
    <Modal footer-hide="true" v-model="handleShowFile" width="1200px" title="在线预览">
      <img style="width: 100%; height: 100%" :src="biggerPath" alt="" title="如需下载请右击" />
    </Modal>
    <!-- 险种信息弹窗 -->
    <Modal v-model="riskinfoModal" :mask-closable="false" footer-hide="true" title="险种信息" width="600px">
      <Table :columns="riskinfoColumns" :data="data1">
        <template slot-scope="{ row }" slot="file">
          <Icon type="ios-paper" style="font-size: 20px" @click="prviewDoc(row)" />
        </template>
        <template slot-scope="{ row }" slot="opration">
          <Button type="success" size="small" @click="downloadPDF(row)">下载</Button>
        </template>
      </Table>
      <Row style="margin-top:20px">
        <i-col span="2" offset="20">
          <Button type="primary" @click="riskinfoModal = false">返回</Button>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { drawSign } from "../../../util/drawSign";
import axios from "axios";
import Vue from "vue";
import util from "../../../util/util";
import deviceapi from "../../../util/deviceapi";
import { exportFile, visitFile, throttle } from "../../../util/util";
// import XLSX from "xlsx";
// import mammoth from "mammoth";
export default {
  data() {
    return {
      disabledGroup: [],
      file1: "1",
      showModal: false,
      showModal2: false,
      showModal3: false,
      uploadObj: {},
      callWay: "",
      start: "",
      recordTime: "00:00",
      recordTimeStamp: -28800000,
      iframeNeedReloaded: false,
      options3: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      phoneRecord: false,
      phoneCCRecord: false,
      messageContent: false,
      interviewModal: false,
      internetModal: false,
      superiorReview: 0,
      serviceRecord: [],
      serviceRecord2: [],
      count: "",
      selection: "",
      insuranceType: "",
      close: true,
      countCopy: "",
      contCount: "",
      historyCount: "",
      tabLabel: [],
      tabStatus: [],
      tabValue: [],
      tabShow: true,
      assignTitle: false,
      ownComplete: false,
      planremark: "",
      form1: {
        workdate: "",
        worktypeName: "",
        chargeStatus: "",
        chargeDifficult: "",
        chargeDate: "",
        successContent: "",
        visitTogether: "否",
        companyReason: [],
        uerReason: [],
        otherReason: "",
        workResultRecord: "",
        workResultButton: [],
        workReplan: "",
        workRetype: "",
        chargeRadio: "",
      },
      // 收费预估状态
      estimatestate: [],
      // 业务员信息
      agent: {
        agentName: "",
        agentstate: "",
        managecom: "",
        mobile: "",
      },
      // 保单信息
      cont: {
        contflagname: "",
        mainpolpaymoney: "",
        mainrisk: "",
        mainriskname: "",
        payCount: "",
        payintv: "",
        paymoney: "",
        paytodate: "",
        subpol: [],
        totalsubpolmoney: "",
      },
      // 投/被保人信息
      customer: {
        appntname: "",
        appntno: "",
        appntphone: "",
        appntpostaladdress: "",
        appntsex: "",
        appntsexname: "",
        bankaccno: "",
        bankcode: "",
        bankname: "",
        customerprotrayal: [],
        insuredname: "",
        insuredno: "",
        insuredphone: "",
        insuredsex: "",
        insuredsexname: "",
        relation: "",
      },
      // 主管陪访
      order: [
        {
          key: "否",
          value: "否",
        },
      ],
      linksuccessflag: [],
      inputSelect: false,
      but: [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
      ],
      nextWorkType: [],
      workSubmitLoading: false,
      phoneNumber: "",
      isPhoneContact: true,
      isMessageContact: false,
      isInternetContact: false,
      isFaceContact: false,
      personList: [],
      modelList: [],
      realTimeDeductionsLoading: false,
      // 短信表单
      message: {
        messageToPerson: "",
        messageModel: "",
      },
      messagePreveiwContent: "",
      sendMessageLoading: false,
      file: [],
      uploadFile: [],
      file2: [],
      uploadFile2: [],
      aboutPolicy: false,
      //表格
      superviseColumns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60,
        },
        {
          title: "保单号",
          key: "contno",
          width: "190",
          fixed: "left",
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "100",
          sortable: true,
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "120",
          sortable: true,
        },
        {
          title: "交次",
          key: "paycount",
          align: "center",
          width: "100",
        },
        {
          title: "交费难度",
          key: "difficulty",
          align: "center",
          width: "120",
          sortable: true,
        },
        {
          title: "应收保费(元)",
          key: "paymoney",
          align: "center",
          width: "140",
          sortable: true,
        },
        {
          title: "宽限期剩余天数",
          key: "restdays",
          align: "center",
          width: "140",
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "150",
          sortable: true,
        },
        {
          title: "计划工作方式",
          key: "worktypename",
          align: "center",
          width: "150",
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "100",
          slot: "planstatename",
        },
      ],
      superviseData: [{}],
      relatedSelection: [],
      historyWorkRecord: false,
      rateValue1: 0,
      isRate: true,
      phoneRecord: false,
      messageContent: false,
      // 未收原因说明
      notReceiveReasonList: [
        {
          reason: "业务员投保",
        },
        {
          reason: "家庭原因",
        },
      ],
      // 工作结果
      workResultList: [
        {
          workResult: "客户明确不交费",
        },
        {
          workResult: "家庭原因",
        },
      ],
      action1: "",
      action2: "",
      credentials: "",
      uploadLoading: false,
      uploadLoading2: false,
      fileIndex1: 0,
      fileIndex2: 0,
      tabIndex: 1,
      consoleIndex: 1,
      chargeRadio: "",
      reDatedisabled: true,
      chargeDifficultDisabled: false,
      couMoneyDisabled: false,
      // 通知业务员
      noticeDisabled: false,
      noticeModal: false,
      msgList: [],
      noticeMsg: "",
      sendFlag: true,
      callBtnDisabled: true, //拨号置灰
      // messageBtnDisabled: false,
      assignContNoNotnull: true,
      remainMessageCount: 0,
      persontype: null,
      callModalShow: false,
      callIndex: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "handleplayOrPause",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      // cc电话录音
      phoneCCRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "200",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [],
      // 短信表格
      messageContentColumns: [
        {
          title: "发送时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "发送对象",
          key: "persionid",
          width: "100",
        },
        {
          title: "发送内容",
          key: "messagecontent",
        },
      ],
      messageContentData: [],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      interviewData: [],
      // 网络联系表格
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      internetData: [],
      userCode: "",
      isLocal0: "9",
      isLocal1: "9",
      isLocal2: "9",

      callTime: "", // 通话时长
      sec: 0, // 秒
      min: 0, // 分
      authorization: "",
      callUploadLoading: false,
      callaction: "",
      callNum: "",
      callflag: "",
      kg: "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",
      recordVOS: [{}, {}],
      problemReview: "",
      isInnerLine: "",
      handleShowFile: false,
      biggerPath: "",
      doworkObj: {},
      excelHtml: "",
      audioUrl: new Audio(),
      audioid: "",
      typeFlag: "",
      dataFlag: "",
      riskinfoModal: false,
      riskinfoColumns: [
        {
          title: '文件',
          align: 'center',
          key: 'file',
          width: '100',
          slot: "file",
        },
        {
          title: '名称',
          align: 'center',
          key: 'name'
        },
        {
          title: "操作",
          key: "opration",
          align: 'center',
          slot: "opration",
        },
      ],
      data1: [],
      modalTitle: null
    };
  },
  filters: {
    filterdate: function (e) {
      if (e) {
        return e.slice(0, 10)
      }
    }
  },
  methods: {
    riskinfoModalShow(e) {
      this.riskinfoModal = true
      this.data1 = e
    },
    // 显示图片
    showFile(row) {
      if (row.ext == "jpg" || row.ext == "png" || row.ext == "jpeg") {
        this.biggerPath = row.photoUrl;
        this.handleShowFile = true;
      } else if (row.ext == "pdf") {
        let type = row.photoUrl.split("type=")[1];
        let obj = {
          id: row.id,
          worktype: type,
        };
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      } else {
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开");
      }
    },
    //播放完毕执行
    overAudio() {
      console.log("播放声音完毕");
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (this.audioid == item.id) {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    //播放
    playOrPause(data) {
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl;
            this.audioid = data.id;
            this.audioUrl.play();
            item.handleplayOrPause = true;
            this.audioUrl.onended = () => {
              this.overAudio();
            };
          } else {
            this.audioUrl.pause();
            item.handleplayOrPause = false;
          }
        } else {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    // 格式错误
    handleFormatError(file) {
      this.callUploadLoading = false;
      this.$Message.info(
        "文件格式错误" + file.name + " 格式错误, 请选择格式为wav"
      );
    },

    // 连接到后端
    calluploadSuccess(response, file, fileList) {
      if (this.callflag === "2" && !this.phoneNumber) {
      } else {
        this.$Message.info(response.msg);
      }
    },

    // 连不到后端的情况
    calluploadFail(response, file, fileList) {
      this.submitLoading = false;
      this.$Message.info("保存失败");
    },
    msgChange() {
      if (this.noticeMsg != "") {
        this.sendFlag = false;
      } else {
        this.sendFlag = true;
      }
    },
    // 通知业务员
    sendNotice() {
      let msgg = {
        workid: this.selection[this.tabIndex].workid,
        operator: this.userCode,
        remark: this.agent.agentcode,
        contno: this.tabValue[0], //保单号
        planid: this.selection[this.tabIndex].planid, //计划编码
        sendcontent: this.noticeMsg, //发送内容
      };
      // console.log(msgg);
      this.api.domessagetoagent(msgg).then((res) => {
        if (res.code == 200) {
          this.noticeModal = false;
          this.noticeMsg = "";
          this.sendFlag = true;
          this.$Message.info("发送信息成功！");
        } else {
          this.$Message.info("发送信息失败！");
        }
      });
    },

    // 查询列表
    selectSendMsg() {
      this.noticeModal = true;
      this.api.querymessagetoagent({ contno: this.tabValue[0] }).then((res) => {
        if (res.code == 200) {
          this.msgList = res.data.records;
        } else {
          this.$Message.info(res.msg);
        }
      });
    },

    // 查询成功后重置表单
    reset() {
      this.form1.chargeStatus = "";
      this.form1.chargeDifficult = "";
      this.form1.chargeDate = "";
      this.form1.successContent = "";
      this.form1.visitTogether = "";
      this.form1.companyReason = [];
      this.form1.uerReason = [];
      this.form1.otherReason = "";
      this.form1.workResultRecord = "";
      this.form1.workResultButton = [];
      this.form1.workReplan = "";
      this.form1.workRetype = "";
      this.form1.chargeRadio = "";
      let resetBtn = [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
      ];
      this.but = resetBtn;
    },

    // tab移除触发
    tabRemove(name) {
      Vue.set(this.tabStatus, name, false);
      this.countCopy--;
      if (this.countCopy <= 1) {
        this.close = false;
      }
    },

    // tab点击
    clickTab(index) {
      if (this.insuranceType == "problem") {
        this.getProblemInfo();
      } else {
        this.tabClick(index, 1);
      }
    },
    tabClick(name, index) {
      this.tabIndex = name;
      this.phoneNumber = "";
      console.log(this.selection[name]);
      let obj = {
        agentcode: this.selection[name].agentcode
          ? this.selection[name].agentcode
          : null,
        contno: this.selection[name].contno
          ? this.selection[name].contno
          : null,
        planid: this.selection[name].planid
          ? this.selection[name].planid
          : null,
        visitType: 0, // 0是PC，1是小程序
      };
      this.api.getBaseInformation(obj).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.couMoneyDisabled = res.data.showpayflag == "0" ? false : true;
          // 交办件备注
          if (
            res.data.workdetailValueMapsVO &&
            res.data.workdetailValueMapsVO.planremark
          ) {
            this.planremark = res.data.workdetailValueMapsVO.planremark || "";
          }
          // badge
          if (res.data.workdetailValueMapsVO) {
            this.contCount = res.data.workdetailValueMapsVO.relatedPlannum;
            //this.historyCount = res.data.workdetailValueMapsVO.historyWorknum;
          } else {
            this.contCount = 0;
            //this.historyCount = 0;
          }
          // 短信条数
          if (res.data.sendmessagetips) {
            this.remainMessageCount = res.data.sendmessagetips;
          } else {
            this.remainMessageCount = "本月剩余短信数量：0条";
          }

          // 业务员信息
          if (res.data.agentdetail) {
            this.agent = res.data.agentdetail;
            if (this.agent.agentcode && this.agent.name) {
              this.agent.agentName =
                this.agent.name + "-" + this.agent.agentcode;
            } else {
              this.agent.agentName = "";
            }
            if (this.agent.managecom && this.agent.managecomname) {
              this.agent.managecom =
                this.agent.managecomname + "-" + this.agent.managecom;
            } else {
              this.agent.managecom = "";
            }
          }
          // 保单信息
          if (res.data.contdetail) {
            this.cont = res.data.contdetail;
            if (this.cont.paytodate) {
              this.cont.paytodate = this.cont.paytodate.substr(0, 10);
            } else {
              this.cont.paytodate = "";
            }
            if (
              this.cont.payyear &&
              this.cont.payyears &&
              this.cont.payintvname
            ) {
              this.cont.payCount =
                this.cont.payyear +
                "/" +
                this.cont.payyears +
                this.cont.payintvname;
            } else {
              this.cont.payCount = "";
            }
          }
          this.personList = [];
          // 短信通知对象
          if (this.insuranceType == "charge" && res.data.customerdetail) {
            this.personList.push({
              key: res.data.customerdetail.appntno,
              value: res.data.customerdetail.appntname,
            });
          } else if (
            this.insuranceType == "disabled" &&
            res.data.agentdetail &&
            res.data.agentdetail.agentstate != "01" &&
            res.data.agentdetail.agentstate != "02" &&
            res.data.customerdetail
          ) {
            this.personList.push({
              key: res.data.customerdetail.appntno,
              value: res.data.customerdetail.appntname,
            });
          } else {
            if (res.data.customerdetail) {
              this.personList.push({
                key: res.data.customerdetail.appntno,
                value: res.data.customerdetail.appntname,
              });
            }
            if (res.data.agentdetail) {
              this.personList.push({
                key: res.data.agentdetail.agentcode,
                value: res.data.agentdetail.name,
              });
            }
          }
          // 投/被保人信息
          if (res.data.customerdetail) {
            this.customer = res.data.customerdetail;
          }

          // 第一次加载下拉框
          if (index && index == 1 && res.data.workdetailValueMapsVO) {
            this.estimatestate = res.data.workdetailValueMapsVO.estimatestate;
            this.linksuccessflag =
              res.data.workdetailValueMapsVO.linksuccessflag;
            this.nextWorkType = res.data.workdetailValueMapsVO.nextWorkType;
            this.order = [
              {
                key: "否",
                value: "否",
              },
            ];
            if (res.data.workdetailValueMapsVO.order) {
              res.data.workdetailValueMapsVO.order.forEach((element) => {
                this.order.push({
                  key: element.key,
                  value: element.value,
                });
              });
            }
          }
          if (res.data.workdetailValueMapsVO) {
            if (res.data.workdetailValueMapsVO.workdate) {
              this.form1.workdate =
                res.data.workdetailValueMapsVO.workdate.substr(0, 10);
            } else {
              this.form1.workdate = "";
            }
            if (res.data.workdetailValueMapsVO.worktypeName) {
              this.form1.worktypeName =
                res.data.workdetailValueMapsVO.worktypeName;
              let workList = res.data.workdetailValueMapsVO.nextWorkType;
              workList.map((item) => {
                if (res.data.workdetailValueMapsVO.worktypeName == item.value) {
                  this.form1.worktypeCode = item.key;
                }
              });
            } else {
              this.form1.worktypeName = "";
              this.form1.worktypeCode = "";
            }
          } else {
            this.form1.workdate = "";
            this.form1.worktypeName = "";
            this.form1.worktypeCode = "";
          }
        }
      });
    },

    // 其他理由是否可填
    otherReasonChange(boo) {
      if (boo) {
        this.inputSelect = true;
      } else {
        this.inputSelect = false;
      }
    },

    // 按钮转换颜色
    nineClick(index) {
      let boo = this.but[index] == "default" ? "success" : "default";
      if (
        boo == "success" &&
        !this.form1.workResultButton.includes(index + 1)
      ) {
        this.form1.workResultButton.push(index + 1);
      } else {
        this.form1.workResultButton = this.form1.workResultButton.filter(
          (item) => {
            return item != index + 1;
          }
        );
      }
      Vue.set(this.but, index, boo);
    },
    // 督导件、收费件批量处理
    sureDoWork() {
      console.log(this.relatedSelection);
      console.log(this.doworkObj, this.agent);
      let arr = [];
      let arr1 = [];
      let arr2 = [];
      this.relatedSelection.forEach((item) => {
        if (item.planstatename == "已完成") {
          arr.push(item.contno);
        }
        if (
          this.doworkObj.workType == "0" ||
          this.doworkObj.workType == "1" ||
          this.doworkObj.workType == "2" ||
          this.doworkObj.workType == "3"
        ) {
          if (this.agent.agentcode != item.agentcode) {
            arr1.push(item.contno);
          }
        }
        let nowDate = new Date().getTime();
        let nextDate = new Date(this.doworkObj.nextPlandate).getTime();
        let days = nextDate - nowDate;
        if (
          (item.planstatename == "未服务" || item.planstatename == "服务中") &&
          days > item.restdays * 1000 * 60 * 60 * 24
        ) {
          arr2.push(item.contno);
        }
      });
      if (arr.length > 0) {
        this.$Message.info({
          content: arr.join("/") + "工作状态为已完成，不可提交工作记录",
          duration: 5,
        });
        return;
      }
      if (arr1.length > 0) {
        this.$Message.info({
          content:
            arr1.join("/") +
            "保单的业务员与本保单业务员非同一人，工作方式是联系业务员，不可同步关联处理。",
          duration: 5,
        });
        return;
      }
      if (arr2.length > 0) {
        this.$Message.info({
          content: "下次工作再计划日期大于" + arr2.join("/") + "保单的宽限日期",
          duration: 5,
        });
        return;
      }
      this.workSubmitLoading = true;
      this.doworkObj.relationCont = this.relatedSelection;
      this.workSubmitLoading = true;
      this.api.dowork(this.doworkObj).then((res) => {
        if (res.code == 200) {
          this.workSubmitLoading = false;
          this.aboutPolicy = false;
          this.$Message.info(res.msg);
          this.reset();
          this.getTotal(this.$route.query.selection);
        } else {
          this.workSubmitLoading = false;
          this.$Message.info(res.msg);
        }
      });
    },
    Onchange() {
      console.log(this.disabledGroup.toString(), "this.disabledGroup");
    },
    // 工作记录提交
    workSubmit() {
      if (this.form1.chargeStatus == "") {
        this.$Message.info("请录入收费预估状态");
        return;
      }
      if (
        this.form1.chargeDifficult == "" &&
        this.form1.chargeDifficult != "0" &&
        this.insuranceType != "assign"
      ) {
        this.$Message.info("请录入预估交费难度");
        return;
      }
      // if (this.form1.chargeDate == "") {
      //   this.$Message.info("请录入交费时间预估");
      //   return;
      // }
      if (this.form1.successContent == "") {
        this.$Message.info("请选择是否联系成功");
        return;
      }

      if (
        this.form1.companyReason.length == 0 &&
        this.form1.uerReason.length == 0 &&
        this.form1.otherReason.length == 0 &&
        (this.form1.chargeStatus == "1" ||
          this.form1.chargeStatus == "2" ||
          this.form1.chargeStatus == "3")
      ) {
        this.$Message.info("请填入未收原因说明！");
        return;
      }
      if (
        this.form1.workResultButton.length == 0 &&
        this.form1.workResultRecord == ""
      ) {
        this.$Message.info("请录入工作结果记录");
        return;
      }
      // if (this.form1.workReplan == "") {
      //   this.$Message.info("请录入下次工作再计划时间！");
      //   return;
      // }
      // if (this.form1.workRetype == "") {
      //   this.$Message.info("请录入工作方式！");
      //   return;
      // }
      if (
        (this.ownComplete && this.form1.chargeRadio === "replan") ||
        !this.ownComplete
      ) {
        // if (this.form1.workReplan == "") {
        //   this.$Message.info("请录入下次工作再计划时间！");
        //   return;
        // }
        if (this.form1.workRetype == "") {
          this.$Message.info("请录入工作方式！");
          return;
        }
      }
      if (this.form1.worktypeCode === "3" || this.form1.worktypeCode === "7") {
        if (this.disabledGroup != "Y") {
          this.$Modal.confirm({
            title: "提示",
            content: "是否已经上传评鉴表！",
            okText: '继续',
            cancelText: "取消",
            onOk: () => {
              this.submit();
            },
          });
          return;
        } else {
          this.submit();
        }
      } else {
        this.submit();
      }
      // if (this.disabledGroup != "Y") {
      //   this.$Modal.confirm({
      //     title: "提示",
      //     content: "是否已经上传评鉴表！",
      //     cancelText: "取消",
      //     onOk: () => {
      //       this.submit();
      //     },

      //   });
      // } else {
      //   this.submit();
      // }
      // this.workSubmitLoading = true;
    },
    submit() {
      let obj = {
        workType: this.form1.worktypeCode ? this.form1.worktypeCode : null,
        difficulty:
          this.form1.chargeDifficult == 0 || this.form1.chargeDifficult
            ? this.form1.chargeDifficult
            : null,
        estimatedate: util.dateToISOString(this.form1.chargeDate),
        estimatestate: this.form1.chargeStatus ? this.form1.chargeStatus : null,
        workid: this.selection[this.tabIndex].workid
          ? this.selection[this.tabIndex].workid
          : null,
        linksuccessflag: this.form1.successContent
          ? this.form1.successContent
          : null,
        nextPlandate: util.dateToISOString(this.form1.workReplan),
        nextWorkType: this.form1.workRetype ? this.form1.workRetype : null,
        nextworkflag: "",
        orderwith: this.form1.visitTogether ? this.form1.visitTogether : null,
        planid: this.selection[this.tabIndex].planid,
        reasonByCompany: null,
        reasonByCustomer: null,
        reasonByother: this.form1.otherReason ? this.form1.otherReason : null,
        resultid: "",
        workresult: this.form1.workResultRecord
          ? this.form1.workResultRecord
          : null,
        evaluateflag: this.disabledGroup.toString() ? this.disabledGroup.toString() : null
      };
      if (this.form1.chargeRadio && this.form1.chargeRadio == "submit") {
        obj.nextworkflag = 1;
      } else {
        obj.nextworkflag = 0;
      }

      let company = "";
      if (this.form1.companyReason && this.form1.companyReason.length > 0) {
        this.form1.companyReason.forEach((element) => {
          company += element + ",";
        });
        company = company.substr(0, company.length - 1);
        // console.log(company)
      } else {
        company = null;
      }
      obj.reasonByCompany = company;

      let user = "";
      if (this.form1.uerReason && this.form1.uerReason.length > 0) {
        this.form1.uerReason.forEach((element) => {
          user += element + ",";
        });
        user = user.substr(0, user.length - 1);
      } else {
        user = null;
      }
      obj.reasonByCustomer = user;

      if (
        this.form1.workResultButton &&
        this.form1.workResultButton.length > 0
      ) {
        this.form1.workResultButton.forEach((element) => {
          obj.resultid += element + ",";
        });
        obj.resultid = obj.resultid.substr(0, obj.resultid.length - 1);
      } else {
        obj.resultid = null;
      }
      console.log(obj);
      this.doworkObj = obj;
      if (this.insuranceType == "supervise" || this.insuranceType == "charge") {
        let obj = {
          planid: this.selection[this.tabIndex].planid,
        };
        this.api.selectAboutlccont(obj).then((res) => {
          if (res.code == 200) {
            if (this.contCount != 0) {
              this.modalTitle = '关联录入'
              this.aboutPolicy = true;
              this.aboutPolicyBtnflag = false
            } else {
              this.sureDoWork();
            }
            console.log("111");
            res.data.records.forEach((element) => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.paycount =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.appointeddate = element.appointeddate.substr(0, 10);
              }
            });
            this.superviseData = res.data.records;
            // }else{
            //   this.api.dowork(obj).then((res) => {
            //     if (res.code == 200) {
            //       this.workSubmitLoading = false;
            //       this.$Message.info(res.msg);
            //       this.reset();
            //       this.getTotal(this.$route.query.selection);
            //     } else {
            //       this.workSubmitLoading = false;
            //       this.$Message.info(res.msg);
            //     }
            //   });
            // }
          } else {
            this.$Message.info(res.msg);
          }
        });
      } else {
        this.workSubmitLoading = true;
        this.api.dowork(obj).then((res) => {
          if (res.code == 200) {
            this.workSubmitLoading = false;
            this.$Message.info(res.msg);
            this.reset();
            this.getTotal(this.$route.query.selection);
          } else {
            this.workSubmitLoading = false;
            this.$Message.info(res.msg);
          }
        });
      }
    },
    // 实时扣款
    realTimeDeductions() {
      this.realTimeDeductionsLoading = true;
      let obj = {
        workid: this.selection[this.tabIndex].workid,
        planid: this.selection[this.tabIndex].planid,
      };
      this.api.doXQRealTimeFee(obj).then((res) => {
        if (res.code == 200) {
          this.$Message.info(res.msg);
        } else {
          this.$Message.info(res.msg);
        }
        this.realTimeDeductionsLoading = false;
      });
    },

    // 操作台显示
    show(index) {
      this.consoleIndex = index;
      if (index == 1) {
        this.isPhoneContact = true;
        this.isMessageContact = false;
        this.isInternetContact = false;
        this.isFaceContact = false;
      }
      if (index == 2) {
        this.isPhoneContact = false;
        this.isMessageContact = true;
        this.isInternetContact = false;
        this.isFaceContact = false;
      }
      if (index == 3) {
        this.isPhoneContact = false;
        this.isMessageContact = false;
        this.isInternetContact = true;
        this.isFaceContact = false;
      }
      if (index == 4) {
        this.isPhoneContact = false;
        this.isMessageContact = false;
        this.isInternetContact = false;
        this.isFaceContact = true;
      }
    },

    // iframe
    sentToIframe(number) {
      // console.log(this.$refs)
      let record = this.serviceRecord;
      let url =
        // sessionStorage.getItem("userIp") +
        "/scrm-gateway/scrm-uerapi/work/phonework?useragentcode=" +
        sessionStorage.getItem("useragentcode") +
        "&workid=" +
        this.selection[this.tabIndex].workid +
        "&planid=" +
        this.selection[this.tabIndex].planid +
        "&persontype=" +
        this.callIndex +
        "&phoneno=" +
        number;
      this.callNum = number;
      // url;
      // this.$refs.callUpload.headers.Authorization = sessionStorage.getItem(
      //   "credentials"
      // );
      // console.log(this.$refs.callUpload.headers.Authorization);
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload.data.persontype = this.callIndex;
      // this.$refs.callUpload.data.phoneno = number;
      this.$refs.telIframe.contentWindow.getMessageFromParent(url);
    },
    uploadOk(refName) {
      // if(refName === "callUpload"){
      this.$refs[refName].handleClick();
      this.typeFlag = "";
      console.log(this.typeFlag, "确定");

      // }
    },
    onCancel() {
      this.typeFlag = "";
      console.log(this.typeFlag, "取消");
    },

    callbeforeUpload(file) {
      this.file1 = file;
      // this.showModal = true
      this.callflag = "0";
      let number = this.isLocal0 + this.agent.mobile;
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload.data.persontype = "0";
      // this.$refs.callUpload.data.phoneno = number;
      this.uploadObj = {
        planid: this.selection[this.tabIndex].planid,
        workid: this.selection[this.tabIndex].workid,
        persontype: "0",
        phoneno: number,
      };
      // let promise = new Promise((resolve) => {
      //   this.$nextTick(function () {
      //     resolve(true);
      //   });
      // });
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },
    uploadVideo(file) {
      if (file.name.substr(file.name.lastIndexOf(".") + 1) !== "wav") {
        this.callUploadLoading = false;
        this.$Message.info(
          "文件格式错误" + file.name + " 格式错误, 请选择格式为wav"
        );
      } else {
        let url = "/scrm-gateway/scrm-uer/api/work/phonework";
        let formData = new FormData();
        formData.append("multipartFile", file);
        formData.append("planid", this.uploadObj.planid);
        formData.append("workid", this.uploadObj.workid);
        formData.append("persontype", this.uploadObj.persontype);
        formData.append("phoneno", this.uploadObj.phoneno);
        axios({
          url,
          method: "post",
          headers: {
            Authorization: sessionStorage.getItem("credentials"),
          },
          data: formData,
        }).then((result) => {
          if (result.data.code == 200) {
            if (this.callflag === "2" && !this.phoneNumber) {
            } else {
              this.$Message.info(result.data.msg);
            }
          } else {
            this.$Message.info(result.data.msg);
          }
        });
      }
    },
    callbeforeUpload2(file) {
      this.file1 = file;
      // this.showModal2 = true
      this.callflag = "1";
      let number = this.isLocal1 + this.customer.appntphone;
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload2.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload2.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload2.data.persontype = "1";
      // this.$refs.callUpload2.data.phoneno = number;
      // let promise = new Promise((resolve) => {
      //   this.$nextTick(function () {
      //     resolve(true);
      //   });
      // });
      this.uploadObj = {
        planid: this.selection[this.tabIndex].planid,
        workid: this.selection[this.tabIndex].workid,
        persontype: "1",
        phoneno: number,
      };
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },

    callbeforeUpload3(file) {
      this.file1 = file;
      this.callflag = "2";
      if (this.phoneNumber) {
        // this.showModal3 = true
      } else {
        this.$Message.info("请输入手机号码");
        return;
      }
      let number = this.isLocal2 + this.phoneNumber;
      console.log("3", "上传", number);
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload3.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload3.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload3.data.persontype = "2";
      // this.$refs.callUpload3.data.phoneno = this.phoneNumber;
      // let promise = new Promise((resolve) => {
      //   this.$nextTick(function () {
      //     resolve(true);
      //   });
      // });
      this.uploadObj = {
        planid: this.selection[this.tabIndex].planid,
        workid: this.selection[this.tabIndex].workid,
        persontype: "2",
        phoneno: number,
      };
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },

    // 实时时间
    getTime() {
      let _this = this;
      let recoTime = "";
      this.interval = setInterval(function () {
        // _this.recordTimeStamp += 1000;
        // let time = new Date(_this.recordTimeStamp);
        // let h = time.getHours();
        // let m = time.getMinutes();
        // let s = time.getSeconds();
        // if (m < 10) {
        //   m = "0" + m;
        // }
        // if (s < 10) {
        //   s = "0" + s;
        // }
        // _this.recordTime = h ? h + ":" + m + ":" + s : m + ":" + s;

        // let s = parseInt((t / 1000) % 60)
        let start = _this.start;
        let end = new Date().getTime();
        let t = end - start;
        let h = parseInt((t / 1000 / 60 / 60) % 24);
        let m = parseInt((t / 1000 / 60) % 60);
        let s = parseInt((t / 1000) % 60);
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        console.log(m + ":" + s);
        // document.getElementById('time').innerText = m + ':' + s
        _this.recordTime = h ? h + ":" + m + ":" + s : m + ":" + s;
      }, 1000);
    },

    // 停止计时
    stopTime() {
      clearInterval(this.interval);
    },

    // 拨号
    callSomeone(index) {
      // if(this.callWay){

      // }else{

      // }
      let number = "";
      this.callIndex = index;
      if (index == 0) {
        this.typeFlag = "0";
        // console.log(this.agent.name, this.agent.mobile)
        number = this.isLocal0 + this.agent.mobile;
      } else if (index == 1) {
        this.typeFlag = "1";
        // console.log(this.customer.appntname, this.customer.appntphone)
        number = this.isLocal1 + this.customer.appntphone;
      } else if (index == 2) {
        if (this.phoneNumber) {
          this.typeFlag = "2";
        } else {
          this.$Message.info("请输入手机号码");
          return;
        }
        // console.log(this.phoneNumber)
        number = this.isLocal2 + this.phoneNumber;
      }

      this.iframeNum = number;
      // this.sentToIframe(this.iframeNum) //传值
      this.callModalShow = true;

      //计时器
      // let start = new Date().getTime()
      this.start = new Date().getTime();
      // document.getElementById('time').innerText = '00:00'
      this.recordTime = "00:00";
      this.getTime();
    },
    closeCallModel() {
      setTimeout(() => {
        console.log("拨号弹框关闭2861");
        this.callModalShow = false;
        this.stopTime();
        clearInterval(this.interval);
      }, 1000);
    },

    // 短信模板转换
    messageModelChange(index) {
      this.modelList.forEach((element) => {
        if (element.key == index) {
          this.messagePreveiwContent = element.content;
        }
      });
    },

    // 短信对象改变
    messagePersonChange(value) {
      if (value) {
        this.modelList = [];
        if (value == this.agent.agentcode) {
          this.persontype = 0;
        } else {
          this.persontype = 1;
        }
        let obj = {
          persontype: this.persontype,
          sendpersonid: value,
          planid: this.selection[this.tabIndex].planid
            ? this.selection[this.tabIndex].planid
            : null,
          workid: this.selection[this.tabIndex].workid
            ? this.selection[this.tabIndex].workid
            : null,
        };
        this.api.getMessageCodeMap(obj).then((res) => {
          if (res.code == 200 && res.data != null) {
            if (res.data.messageCodeMap) {
              res.data.messageCodeMap.forEach((element) => {
                this.modelList.push({
                  key: element.messagecode,
                  value: element.messagename,
                  content: element.messagevalue,
                });
              });
            }
          } else {
            this.$Message.info(res.msg);
          }
        });
      }
    },

    // 上传文件转到手动提交
    handleUpload(file) {
      // 保存需要上传的文件
      let keyID = Math.random().toString().substr(2);
      file["keyID"] = keyID;
      file["id"] = "";
      this.file.push(file);
      this.uploadFile.push(file);
      return false;
    },

    // 删除文件
    delectFile(keyID) {
      // 删除文件
      this.file = this.file.filter((item) => {
        // 删除已上传文件
        if (item.id != "" && item.keyID == keyID) {
          let obj = {
            planid: this.selection[this.tabIndex].planid,
            workid: this.selection[this.tabIndex].workid,
            controllerType: "1",
            delid: item.id,
          };
          this.api.donetwork(obj).then((res) => {
            if (res.code == 200) {
            } else {
            }
          });
        }
        return item.keyID != keyID;
      });
      this.uploadFile = this.uploadFile.filter((item) => {
        return item.keyID != keyID;
      });
    },

    // 上传文件
    upload() {
      this.$refs.upload.headers.Authorization =
        sessionStorage.getItem("credentials");
      this.$refs.upload.data.planid = this.selection[this.tabIndex].planid;
      this.$refs.upload.data.workid = this.selection[this.tabIndex].workid;
      this.$refs.upload.data.controllerType = "0";
      // 上传文件
      if (this.uploadFile.length != 0) {
        this.uploadLoading = true;
        for (let i = 0; i < this.uploadFile.length; i++) {
          this.fileIndex1 = 0;
          let item = this.uploadFile[i];
          this.$refs.upload.post(item);
        }
      }
    },

    // 连不到后端的情况
    uploadFail(response, file, fileList) {
      this.fileIndex1++;
      this.file = this.file.filter((item) => {
        // uid为系统生成
        return item.uid != file.uid;
      });
      if (this.fileIndex1 == this.uploadFile.length) {
        this.uploadLoading = false;
        this.uploadFile = [];
      }
    },

    // 连接到后端
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      this.fileIndex1++;
      if (response.code == 200) {
        this.file.forEach((element) => {
          if (element.uid == file.uid) {
            element.id = response.data;
          }
        });
      } else {
        this.file = this.file.filter((item) => {
          return item.uid != file.uid;
        });
        this.$Message.info(file.name + response.msg);
      }
      if (this.fileIndex1 == this.uploadFile.length) {
        this.$Message.info("文件上传成功");
        this.uploadLoading = false;
        this.uploadFile = [];
      }
    },

    handleUpload2(file) {
      // 保存需要上传的文件
      let keyID = Math.random().toString().substr(2);
      file["keyID"] = keyID;
      file["id"] = "";
      this.file2.push(file);
      this.uploadFile2.push(file);
      return false;
    },

    delectFile2(keyID) {
      // 删除文件
      this.file2 = this.file2.filter((item) => {
        // 删除已上传文件
        if (item.id != "" && item.keyID == keyID) {
          let obj = {
            planid: this.selection[this.tabIndex].planid,
            workid: this.selection[this.tabIndex].workid,
            controllerType: "1",
            delid: item.id,
          };
          this.api.dointerviewwork(obj).then((res) => {
            if (res.code == 200) {
            } else {
            }
          });
        }
        return item.keyID != keyID;
      });
      this.uploadFile2 = this.uploadFile2.filter((item) => {
        return item.keyID != keyID;
      });
    },

    upload2() {
      // 上传文件
      this.$refs.upload2.headers.Authorization =
        sessionStorage.getItem("credentials");
      this.$refs.upload2.data.planid = this.selection[this.tabIndex].planid;
      this.$refs.upload2.data.workid = this.selection[this.tabIndex].workid;
      this.$refs.upload2.data.controllerType = "0";
      // 上传文件
      // console.log(this.$refs.upload2)
      if (this.uploadFile2.length != 0) {
        this.uploadLoading2 = true;
        for (let i = 0; i < this.uploadFile2.length; i++) {
          this.fileIndex2 = 0;
          let item = this.uploadFile2[i];
          // console.log(item)
          this.$refs.upload2.post(item);
        }
      }
    },

    uploadFail2(response, file, fileList) {
      this.fileIndex2++;
      this.file2 = this.file2.filter((item) => {
        return item.uid != file.uid;
      });
      if (this.fileIndex2 == this.uploadFile2.length) {
        this.uploadLoading2 = false;
        this.uploadFile2 = [];
      }
    },

    uploadSuccess2(response, file, fileList) {
      this.fileIndex2++;
      if (response.code == 200) {
        this.file2.forEach((element) => {
          if (element.uid == file.uid) {
            element.id = response.data;
          }
        });
      } else {
        this.file2 = this.file2.filter((item) => {
          return item.uid != file.uid;
        });
        this.$Message.info(file.name + response.msg);
      }
      if (this.fileIndex2 == this.uploadFile2.length) {
        this.$Message.info("文件上传成功");
        this.uploadLoading2 = false;
        this.uploadFile2 = [];
      }
    },

    // 相关保单对话框点击显示
    handleTabs() {
      if (this.contCount != 0) {
        this.modalTitle = '相关保单 · ' + this.contCount
        this.aboutPolicy = true;
        this.aboutPolicyBtnflag = true
      }
      this.superviseData = [];
      let obj = {
        planid: this.selection[this.tabIndex].planid,
      };
      this.api.selectAboutlccont(obj).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.superviseData = res.data.records;
          this.superviseData.forEach((element) => {
            if (element.paytodate) {
              element.paytodate = element.paytodate.substr(0, 10);
            }
            if (element.payyear && element.payyears && element.payintvname) {
              element.paycount =
                element.payyear + "/" + element.payyears + element.payintvname;
            }
            if (element.appointeddate) {
              element.appointeddate = element.appointeddate.substr(0, 10);
            }
          });
        } else {
        }
      });
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.relatedSelection = selection;
    },

    // 相关保单批量处理
    relatedDeal() {
      if (this.relatedSelection.length > 0) {
        this.relatedSelection.forEach((element) => {
          let i = 0;
          this.selection.forEach((selectionElement) => {
            if (element.planid == selectionElement.planid) {
            } else {
              i++;
              if (i == this.selection.length) {
                this.selection.push(element);
              }
            }
          });
        });
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let arr = [];
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          this.tabLabel[index] = "保单：" + element.contno;
          arr.push("true");
          index++;
          if (index == this.selection.length) {
            this.tabStatus = arr;
          }
        });
        this.aboutPolicy = false;
        this.relatedSelection = [];
        if (this.countCopy <= 1) {
          this.close = false;
        } else {
          this.close = true;
        }
      } else {
        this.$Message.info("请选择数据");
      }
    },

    // 对话框关闭
    modalVisibleChange1(boo) {
      if (boo == false) {
        this.aboutPolicy = false;
      }
    },
    // 历史工作记录对话框点击显示
    historyWork() {
      this.historyWorkRecord = true;
      this.api.querymessagetoagent({ contno: this.tabValue[0] }).then((res) => {
        if (res.code == 200) {
          this.msgList = res.data.records;
        } else {
          this.$Message.info(res.msg);
        }
      });
    },
    // 对话框关闭
    modalVisibleChange2(boo) {
      if (boo == false) {
        this.historyWorkRecord = false;
      }
    },

    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid,
      });
      this.phoneRecordData = res.data;
      this.phoneRecordData.forEach((item) => {
        item.handleplayOrPause = false;
      });
      // console.log(this.phoneRecordData);
      this.phoneRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
      this.audioUrl.pause();
      this.phoneCCRecord = false;
    },
    // 短信内容对话框点击显示
    async messageContentShow({ plainid, workid }) {
      let res = await this.api.smsData({
        plainid,
        workid,
      });
      this.messageContentData = res.data;
      // console.log(res.data)
      this.messageContent = true;
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false;
    },

    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid,
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        } else {
          item.icon = "paper";
        }
      });
      // console.log(this.interviewData)
      this.interviewModal = true;
    },
    modalVisibleChange6() {
      this.interviewModal = false;
      // console.log(this.interviewModal, 1111111)
    },
    // 网络对话框
    async internetShow({ plainid, workid }) {
      let res = await this.api.internetPicturesInfo({
        plainid,
        workid,
      });
      this.internetData = res.data;
      this.internetData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        } else {
          item.icon = "paper";
        }
      });
      // console.log(this.internetData);
      this.internetModal = true;
    },
    modalVisibleChange7() {
      this.internetModal = false;
      // console.log(this.internetModal,1111111)
    },
    downloadCCPhoneRecord(url) {
      window.open(url);
    },
    prviewDoc(row){
      if(row.type=='1'){
        window.open(row.url);
      }else{
        let obj = {
          id:row.updateId
        }
        exportFile("scrm-gateway/scrm-uer/api/fileDownload/download", obj);
      }
    },
    downloadPDF(row) {
        let obj = {
          id:row.updateId
        }
        exportFile("scrm-gateway/scrm-uer/api/fileDownload/download", obj);
    },
    downloadPhoneRecord(id) {
      let obj = {
        id,
        worktype: "phone",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype: "interview",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInternet(id) {
      let obj = {
        id,
        worktype: "net",
      };
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },

    // 星级改变
    rateChange(value) {
      if (value == 0) {
        this.isRate = true;
      } else {
        this.isRate = false;
      }
    },
    modalVisibleChange5(value) {
      if (this.callWay === "1") {
        // dcw 2021/2/23 替换成自己新封装的方法
        if (value) {
          if (this.iframeNum) {
            // 拨号
            console.log("startdial" + this.iframeNum);
            deviceapi.TV_StartDial(0, this.iframeNum);
            // 开始录音
            deviceapi.TV_StartRecordFile(0);
            // 打开耳机
            deviceapi.TV_EnableLine2Spk(0, 1);
            // 打开麦克风
            deviceapi.TV_EnableMic(0, 1);
          }
        } else {
          // 停止录音
          deviceapi.TV_StopRecordFile(0);
          // 关闭耳机
          deviceapi.TV_EnableLine2Spk(0, 0);
          // 关闭麦克风
          deviceapi.TV_EnableMic(0, 0);
          // 挂机
          deviceapi.TV_HangUpCtrl(0);
        }
      } else {
        if (value) {
          this.websocketsend("cmd:call " + this.iframeNum);
        } else {
          this.websocketsend("cmd:hang");
        }
      }

      /* 下面是iframe的，暂时不用
      if (value) {
        // console.log(this.iframeNum)
        // 给input赋值
        window.frames['frame'].document.getElementById(
          'dialcode'
        ).value = this.iframeNum
        // 调拨号
        window.frames['frame'].document.getElementById('callsb').onclick()
        // 调开始录音
        window.frames['frame'].document.getElementById('startRecord').onclick()
        // 调打开耳机
        window.frames['frame'].document.getElementById('openHeadset').onclick()
        // 调打开麦克
        window.frames['frame'].document.getElementById('openMic').onclick()
      }
      if (!value) {
        // 调结束录音
        window.frames['frame'].document.getElementById('endRecord').onclick()
        // 调关闭耳机
        window.frames['frame'].document.getElementById('closeHeadset').onclick()
        // 调关闭麦克
        window.frames['frame'].document.getElementById('closeMic').onclick()
        // 调挂机
        window.frames['frame'].document.getElementById('hangUp').onclick()
        // // 调上传
        // setTimeout(() => {
        //   window.frames['frame'].document.getElementById('upload').onclick()
        // }, 3000)
        this.callModalShow = false
      }
      */
    },
    //自己提交单选
    chargeRadioChange(type) {
      if (type == "submit") {
        this.reDatedisabled = true;
      }
      if (type == "replan") {
        this.reDatedisabled = false;
      }
    },
    // 判断短信条数
    judgeMessageCount() {
      this.sendMessageLoading = true;
      let obj = {
        messageid: this.message.messageModel,
        personid: this.message.messageToPerson,
        persontype: this.persontype,
        planid: this.selection[this.tabIndex].planid,
        workid: this.selection[this.tabIndex].workid,
      };
      // console.log(obj);
      this.api.domessageworkd(obj).then((res) => {
        this.sendMessageLoading = false;
        if (res.code == 200) {
          this.$Message.info("发送成功");
        } else {
          this.$Message.info(res.msg);
        }
      });
    },

    // 未收原因说明复选框选值
    checkSelect(value) {
      // console.log(value)
    },

    // 初始化
    variable() {
      // 网络联系地址
      // this.action1 = sessionStorage.getItem("userIp") + "api/work/donetwork";
      this.action1 = "/scrm-gateway/scrm-uer/api/work/donetwork";
      // console.log(this.action1);
      // 面访联系地址
      this.action2 =
        // sessionStorage.getItem("userIp") + "api/work/dointerviewwork";
        "/scrm-gateway/scrm-uer/api/work/dointerviewwork";

      // 设置下拉菜单
      if (this.insuranceType == "supervise") {
      }
      if (this.insuranceType == "charge") {
        // this.saleManInfo = false;
        // this.callBtnDisabled = true;
        // this.messageBtnDisabled = true;
      }
      if (this.insuranceType == "disabled") {
        // this.tabShow = false;
        this.ownComplete = true;
        // console.log(this.ownComplete);
        // this.couMoneyDisabled = true;
        // this.saleManInfo = false;
        if (this.selection.contLogo == "孤儿单") {
          // this.callBtnDisabled = true;
          // this.messageBtnDisabled = true;
        }
      }
      if (this.insuranceType == "assign") {
        if (this.selection.contno == null) {
          // this.couMoneyDisabled = true;
          this.assignContNoNotnull = false;
          this.show(3);
        }
        this.tabShow = false;
        this.assignTitle = true;
        this.ownComplete = true;
      }
      // 设置tab的数量、label和相应的contno存储
      if (this.selection && this.selection.length) {
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let arr = [];
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          if (this.insuranceType == "problem") {
            this.tabLabel[index] =
              "问题件编号：" +
              element.problemFileId +
              this.kg +
              "保单：" +
              element.contno;
          } else {
            this.tabLabel[index] = "保单：" + element.contno;
          }
          arr.push("true");
          index++;
          if (index == this.selection.length) {
            this.tabStatus = arr;
          }
        });
      } else {
        let arr = [];
        arr.push("true");
        this.tabStatus = arr;
        let selectionCopy = [];
        selectionCopy.push(this.selection);
        this.selection = selectionCopy;
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          if (this.insuranceType == "problem") {
            this.tabLabel[index] =
              "问题件编号：" +
              element.problemFileId +
              this.kg +
              "保单：" +
              element.contno;
          } else {
            this.tabLabel[index] = "保单：" + element.contno;
          }
          index++;
        });
        //   this.count = 1;
        //   this.countCopy = 1;
        //   this.tabLabel[0] = "保单：" + this.selection.contno;
        //   this.tabValue.push(this.selection.contno);
      }
      // 若等于1，禁止关闭tab
      if (this.countCopy <= 1) {
        this.close = false;
      }

      // console.log(this.selection);
      if (this.insuranceType == "problem") {
        this.getProblemInfo();
      } else {
        this.tabClick(0, 1);
      }
      // 页面基础信息显示
    },

    // 问题回复提交
    problemSubmit() {
      if (!this.problemReview) {
        this.$Message.info("请先输入回复内容");
        return;
      }
      let obj = {
        replay: this.problemReview,
        rowId: this.recordVOS[this.recordVOS.length - 1].rowId,
      };
      this.api.replayProblemFile(obj).then((res) => {
        if (res.code === 200) {
          this.problemReview = "";
          this.getProblemInfo();
        } else {
          this.$Message.info(res.msg);
        }
      });
    },
    // 获取问题件详情
    async getProblemInfo() {
      let obj = {
        problemFileId: this.selection[0].problemFileId
          ? this.selection[0].problemFileId
          : null,
        contno: this.selection[0].contno ? this.selection[0].contno : null,
      };
      let res = await this.api.getProblemFileWorkDetail(obj);
      // 业务员信息
      if (res.data.agentdetail) {
        this.agent = res.data.agentdetail;
        this.agent.agentstate = this.agent.agentState;
        if (this.agent.agentCode && this.agent.agentName) {
          this.agent.agentName =
            this.agent.agentName + "-" + this.agent.agentCode;
        } else {
          this.agent.agentName = "";
        }
        if (this.agent.manageCom && this.agent.manageComName) {
          this.agent.managecom =
            this.agent.manageComName + "-" + this.agent.manageCom;
        } else {
          this.agent.managecom = "";
        }
      }
      // 保单信息
      if (res.data.contdetail) {
        this.cont = res.data.contdetail;
        if (this.cont.paytodate) {
          this.cont.paytodate = this.cont.paytodate.substr(0, 10);
        } else {
          this.cont.paytodate = "";
        }
        if (this.cont.payyear && this.cont.payyears && this.cont.payintvname) {
          this.cont.payCount =
            this.cont.payyear +
            "/" +
            this.cont.payyears +
            this.cont.payintvname;
        } else {
          this.cont.payCount = "";
        }
        // 投/被保人信息
        if (res.data.customerdetail) {
          this.customer = res.data.customerdetail;
        }
        // 沟通信息
        if (res.data.recorddetail.recordVOS) {
          this.recordVOS = res.data.recorddetail.recordVOS;
        }
      }
    },
    async getTotal({ planid, contno, paytodate }) {
      console.log();
      let res = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate,
      });
      if (res.data) {
        this.historyCount = res.data.length;
      }
      this.serviceRecord = res.data;
      let res2 = await this.api.selectallworkdetail({ contno });
      let CCrecord = [];
      $.ajax("scrm-gateway/scrm-uer/api/ccRecord/selectCCRecord/" + contno, {
        method: "get",
        contentType: "application/json;charset=utf-8",
        headers: {
          Authorization: sessionStorage.getItem("credentials"),
        },
        success: (result) => {
          if (result.code == 200 && result.data != null) {
            CCrecord = result.data;
            let serviceRecord2 = res2.data
              ? res2.data.allProfessionalWorkdetail
              : [[]];
            console.log(this.$route.query.selection, "CCrecord");
            if (CCrecord.length != 0) {
              CCrecord.forEach((item, index) => {
                item.updateTime = item.subtime;
                item.worktype = "客服电话联系客户";
                item.infoType = "CC";
                item.payyear = String(this.$route.query.selection.payyear);
                item.payyears = this.$route.query.selection.payyears;
                item.payintv = this.$route.query.selection.payintvname;
                serviceRecord2[0].push(item);
              });
              serviceRecord2[0].sort(function (a, b) {
                return b.updateTime < a.updateTime ? -1 : 1;
              });
            }
            this.historyCount = serviceRecord2[0].length;
            this.serviceRecord2 = serviceRecord2;
          } else {
            CCrecord = [];
            this.serviceRecord2 = res2.data
              ? res2.data.allProfessionalWorkdetail
              : [];
          }
        },
        error: (result) => {
          this.$Message.error(result.msg);
        },
      });

      // console.log(this.serviceRecord, "交办件信息");
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime);
      // console.log("imageUrl",imageUrl)
      document.getElementsByClassName("ivu-card-body")[0].style.background =
        "url(" + imageUrl + ") left top repeat";
    },
    aaa() {
      alert("11");
    },
    T_GetEvent(uID, uEventType, uHandle, uResult, szdata) {
      let self = this;
      console.log(uEventType);
      //var vValueArray=qnviccub.QNV_Event(0,2,0,"","",1024);
      if (uEventType == -1) return;
      var vValue =
        " type=" +
        uEventType +
        " Handle=" +
        uHandle +
        " Result=" +
        uResult +
        " szdata=" +
        szdata;
      switch (uEventType) {
        case deviceapi.BriEvent_PhoneHook: // 本地电话机摘机事件
          // AppendStatusEx(uID, "本地电话机摘机" + vValue);
          break;
        case deviceapi.BriEvent_PhoneDial: // 只有在本地话机摘机，没有调用软摘机时，检测到DTMF拨号
          // AppendStatusEx(uID, "本地话机拨号" + vValue);
          break;
        case deviceapi.BriEvent_PhoneHang: // 本地电话机挂机事件
          // TV_HangUpCtrl(uID);
          // AppendStatusEx(uID, "本地电话机挂机" + vValue);
          self.closeCallModel();
          break;
        case deviceapi.BriEvent_CallIn: // 外线通道来电响铃事件
          // AppendStatusEx(uID, "外线通道来电响铃事件" + vValue);
          break;
        case deviceapi.BriEvent_GetCallID: //得到来电号码
          // AppendStatusEx(uID, "得到来电号码" + vValue);
          break;
        case deviceapi.BriEvent_StopCallIn: // 对方停止呼叫(产生一个未接电话)
          // AppendStatusEx(uID, "对方停止呼叫(产生一个未接电话)" + vValue);
          break;
        case deviceapi.BriEvent_DialEnd: // 调用开始拨号后，全部号码拨号结束
          // AppendStatusEx(uID, "调用开始拨号后，全部号码拨号结束" + vValue);
          break;
        case deviceapi.BriEvent_PlayFileEnd: // 播放文件结束事件
          // AppendStatusEx(uID, "播放文件结束事件" + vValue);
          break;
        case deviceapi.BriEvent_PlayMultiFileEnd: // 多文件连播结束事件
          // AppendStatusEx(uID, "多文件连播结束事件" + vValue);
          break;
        case deviceapi.BriEvent_PlayStringEnd: //播放字符结束
          // AppendStatusEx(uID, "播放字符结束" + vValue);
          break;
        case deviceapi.BriEvent_RepeatPlayFile: // 播放文件结束准备重复播放
          // AppendStatusEx(uID, "播放文件结束准备重复播放" + vValue);
          break;
        case deviceapi.BriEvent_SendCallIDEnd: // 给本地设备发送震铃信号时发送号码结束
          // AppendStatusEx(uID, "给本地设备发送震铃信号时发送号码结束" + vValue);
          break;
        case deviceapi.BriEvent_RingTimeOut: //给本地设备发送震铃信号时超时
          // AppendStatusEx(uID, "给本地设备发送震铃信号时超时" + vValue);
          break;
        case deviceapi.BriEvent_Ringing: //正在内线震铃
          // AppendStatusEx(uID, "正在内线震铃" + vValue);
          break;
        case deviceapi.BriEvent_Silence: // 通话时检测到一定时间的静音.默认为5秒
          // AppendStatusEx(uID, "通话时检测到一定时间的静音" + vValue);
          break;
        case deviceapi.BriEvent_GetDTMFChar: // 线路接通时收到DTMF码事件
          // AppendStatusEx(uID, "线路接通时收到DTMF码事件" + vValue);
          break;
        case deviceapi.BriEvent_RemoteHook: // 拨号后,被叫方摘机事件
          // AppendStatusEx(uID, "拨号后,被叫方摘机事件" + vValue);
          break;
        case deviceapi.BriEvent_RemoteHang: //对方挂机事件
          // TV_HangUpCtrl(uID);
          self.closeCallModel();
          // AppendStatusEx(uID, "对方挂机事件" + vValue);
          break;
        case deviceapi.BriEvent_Busy: // 检测到忙音事件,表示PSTN线路已经被断开
          // AppendStatusEx(uID, "检测到忙音事件,表示PSTN线路已经被断开" + vValue);
          break;
        case deviceapi.BriEvent_DialTone: // 本地摘机后检测到拨号音
          // AppendStatusEx(uID, "本地摘机后检测到拨号音" + vValue);
          break;
        case deviceapi.BriEvent_RingBack: // 电话机拨号结束呼出事件。
          // AppendStatusEx(uID, "电话机拨号结束呼出事件" + vValue);
          break;
        case deviceapi.BriEvent_MicIn: // MIC插入状态
          // AppendStatusEx(uID, "MIC插入状态" + vValue);
          break;
        case deviceapi.BriEvent_MicOut: // MIC拔出状态
          // AppendStatusEx(uID, "MIC拔出状态" + vValue);
          break;
        case deviceapi.BriEvent_FlashEnd: // 拍插簧(Flash)完成事件，拍插簧完成后可以检测拨号音后进行二次拨号
          // AppendStatusEx(uID, "拍插簧(Flash)完成事件，拍插簧完成后可以检测拨号音后进行二次拨号" + vValue);
          break;
        case deviceapi.BriEvent_RefuseEnd: // 拒接完成
          // AppendStatusEx(uID, "拒接完成" + vValue);
          break;
        case deviceapi.BriEvent_SpeechResult: // 语音识别完成
          // AppendStatusEx(uID, "语音识别完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxRecvFinished: // 接收传真完成
          // AppendStatusEx(uID, "接收传真完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxRecvFailed: // 接收传真失败
          // AppendStatusEx(uID, "接收传真失败" + vValue);
          break;
        case deviceapi.BriEvent_FaxSendFinished: // 发送传真完成
          // AppendStatusEx(uID, "发送传真完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxSendFailed: // 发送传真失败
          // AppendStatusEx(uID, "发送传真失败" + vValue);
          break;
        case deviceapi.BriEvent_OpenSoundFailed: // 启动声卡失败
          // AppendStatusEx(uID, "启动声卡失败" + vValue);
          break;
        case deviceapi.BriEvent_UploadSuccess: //远程上传成功
          // AppendStatusEx(uID, "远程上传成功" + vValue);
          break;
        case deviceapi.BriEvent_UploadFailed: //远程上传失败
          // AppendStatusEx(uID, "远程上传失败" + vValue);
          break;
        case deviceapi.BriEvent_EnableHook: // 应用层调用软摘机/软挂机成功事件
          // AppendStatusEx(uID, "应用层调用软摘机/软挂机成功事件" + vValue);
          break;
        case deviceapi.BriEvent_EnablePlay: // 喇叭被打开或者/关闭
          // AppendStatusEx(uID, "喇叭被打开或者/关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableMic: // MIC被打开或者关闭
          // AppendStatusEx(uID, "MIC被打开或者关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableSpk: // 耳机被打开或者关闭
          // AppendStatusEx(uID, "耳机被打开或者关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableRing: // 电话机跟电话线(PSTN)断开/接通
          // AppendStatusEx(uID, "电话机跟电话线(PSTN)断开/接通" + vValue);
          break;
        case deviceapi.BriEvent_DoRecSource: // 修改录音源
          // AppendStatusEx(uID, "修改录音源" + vValue);
          break;
        case deviceapi.BriEvent_DoStartDial: // 开始软件拨号
          // AppendStatusEx(uID, "开始软件拨号" + vValue);
          break;
        case deviceapi.BriEvent_RecvedFSK: // 接收到FSK信号，包括通话中FSK/来电号码的FSK
          // AppendStatusEx(uID, "接收到FSK信号，包括通话中FSK/来电号码的FSK" + vValue);
          break;
        case deviceapi.BriEvent_PlugOut:
          // AppendStatusEx(uID, "设备移除");
          handleException();
          break;
        case deviceapi.BriEvent_DevErr: //设备错误
          // AppendStatusEx(uID, "设备错误" + decodeURIComponent(vValue));
          break;
        default:
          // if (uEventType < BriEvent_EndID)
          // AppendStatusEx(uID, "忽略其它事件发生:ID=" + uEventType + vValue);
          break;
      }
    },

    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:3001";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.callWay = "0";
    },
    websocketonerror() {
      //连接建立失败重连
      // this.initWebSocket();
      this.callWay = "1";

      // 添加自定义的方法 2021/2/23 dcw
      let iVer = 1; //第一个版本
      let self = this;
      deviceapi.check_ver(iVer, function (nRet) {
        console.log(nRet);
        if (nRet == deviceapi.W_OK) {
          deviceapi.TV_Initialize(function () {
            self.callBtnDisabled = false;
          });
          // deviceapi.getEvent(self.T_GetEvent);
        }
      });
    },
    qq() {
      console.log(11111111);
      let domArr = document.querySelectorAll(".ivu-upload-input");
      //  this.$refs.fileInput.dispatchEvent(new MouseEvent('click'))
      domArr[0].click();
    },
    websocketonmessage(e) {
      let domArr = document.querySelectorAll(".ivu-upload-input");
      console.log(e, "eeee");
      //数据接收
      // if(!(e.data ==="event:hang" &&  this.dataFlag === "event:hang")){
      if (e.data === "err:忙音,请挂电话") {
        // console.log(domArr[0].click(),"{domArr}")
        console.log("页面断开连接");
        this.stopTime();
        clearInterval(this.interval);
        this.callModalShow = false;
      } else if (e.data == "event:ready") {
        // 连接成功，
        this.callBtnDisabled = false;
      } else if (e.data == "event:hang") {
        // 挂断
        console.log("websock断开连接", this.typeFlag);
        if (this.typeFlag === "0") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal = true;
        } else if (this.typeFlag === "1") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal2 = true;
        } else if (this.typeFlag === "2") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal3 = true;
        } else {
          this.showModal1 = false;
          this.showModal2 = false;
          this.showModal3 = false;
        }
      }
      this.dataFlag = e.data;
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
      // console.log("qqq",Data)
    },
    websocketclose(e) {
      //关闭
      // console.log('断开连接',e);
    },
    checkline() {
      // $.ajax(
      //   "../api/user/checkline/" + sessionStorage.getItem("useragentcode"),
      //   {
      //     method: "put",
      //     contentType: "application/json;charset=utf-8",
      //     beforeSend: function (xhr) {
      //       xhr.setRequestHeader(
      //         "Authorization",
      //         sessionStorage.getItem("credentials")
      //       );
      //     },
      //     success: (res) => {
      //       if (res.code === 200) {
      //         this.isInnerLine = res.data;
      //       }
      //     },
      //     error: (res) => {
      //       this.$Message.info(res.msg);
      //     },
      //   }
      // );
    },
  },

  mounted() {
    // 重新实现了接口 2021/2/23 dcw
    // setTimeout(this.qq,2000)
    this.userCode = sessionStorage.getItem("useragentcode");
    this.variable();
    this.checkline();
    if (this.insuranceType !== "problem") {
      this.getTotal(this.selection[0]);
    }
    this.authorization = sessionStorage.getItem("credentials");
    this.callaction = sessionStorage.getItem("userIp") + "api/work/phonework";
    // console.log(this.$route.query.selection)

    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      new Date().getDate();
    this.draw(this.$refs.myCanvas, loginUser, loginTime);

    this.initWebSocket();
  },
  destroyed() {
    console.log("dest");
    if (this.callWay === "0") {
      // this.websocketclose()
      this.websock.close();
    } else {
      // 页面刷新前关闭所有设备
      deviceapi.CloseDevice(0xff, function (nResult) {
        console.log("关闭设备完成.");
      });
    }
  },
  beforeMount() {
    this.iframeNeedReloaded = false;
    this.insuranceType = this.$route.query.insuranceType;
    console.log(this.insuranceType);
    this.selection = this.$route.query.selection;
    if (this.insuranceType == "assign") {
      this.chargeDifficultDisabled = true;
    }
  },
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.ivu-upload-drag:hover {
  border: none;
}

.ivu-upload-drag {
  border: none;
}

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon .ivu-icon-ios-close {
  color: #fff !important;
}

.ivu-modal-header p,
.ivu-modal-header-inner {
  color: white !important;
}

.tableExcel>table {
  width: 100%;
  border-right: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-collapse: collapse;
  margin: auto;
}

.tableExcel>table td {
  border-left: 1px solid #e8eaec;
  border-top: 1px solid #e8eaec;
  white-space: nowrap;
  padding: 0.5rem;
}

.tableExcel>tbody tr:nth-of-type(1) {
  font-weight: bold;
  font-size: 13px;
}
</style>
